<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拼图游戏</title>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
img {
    border: 0 none;
}
.div01 {  
	display:inline-block;
	width:200px;  
	height:200px;  
	background: url("../img/1-modify.jpg") no-repeat;  
}
/* 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型 */
.div02{
    display:inline-block;
	width:200px;  
	height:200px;  
	background: url("../img/1-modify.jpg") no-repeat;
	background-position:-0px -200px;
}

.div03{
	display:inline-block;
	width:200px;  
	height:200px;  
	background: url("../img/1-modify.jpg") no-repeat;
	background-position:-0px -400px;
}

.row01 .row02{
	display:block;
}
.row02{
	clear:both;
}
.row03{
	clear:both;
}
.left-spacing{margin-left:5px}
.top-spacing{margin-top:5px}
.basic-box{display:inline-block;width:200px;height:200px;}
.btn-start{width: 150px;line-height: 60px;text-align: center;font-size: 20px;margin: 20px auto 0;background: #00d0ff;color: white;cursor:pointer;}
</style>
</head>

<body>
<div style="width: fit-content;margin: 50px auto;">
	<div class="row01">
		<div class="basic-box" data-index="0"><div class="div01 img-box" data-index="0" onclick="move(this)"></div></div>
		<div class="basic-box left-spacing" data-index="1"><div class="div01 img-box" style="background-position:-200px 0px;" data-index="1" onclick="move(this)"></div></div>
		<div class="basic-box left-spacing" data-index="2"><div class="div01 img-box" style="background-position:-400px 0px;" data-index="2" onclick="move(this)"></div></div>
	</div>

	<div class="row02 top-spacing">
		<div class="basic-box" data-index="3"><div class="div02 img-box" data-index="3" onclick="move(this)"></div></div>
		<div class="basic-box left-spacing" data-index="4"><div class="div02 img-box" style="background-position:-200px -200px;" data-index="4" onclick="move(this)"></div></div>
		<div class="basic-box left-spacing" data-index="5"><div class="div02 img-box" style="background-position:-400px -200px;" data-index="5" onclick="move(this)"></div></div>
	</div>

	<div class="row03 top-spacing">
		<div class="basic-box" data-index="6"><div class="div03 img-box" data-index="6" onclick="move(this)"></div></div>
		<div class="basic-box left-spacing" data-index="7"><div class="div03 img-box" style="background-position:-200px -400px;" data-index="7" onclick="move(this)"></div></div>
		<div class="basic-box left-spacing" data-index="8"><div class="div03 img-box" style="background-position:-400px -400px;" data-index="8"></div></div>
	</div>
	
	<div class="btn-start" onclick="start(this)">开始游戏</div>
</div>
</body>
<script type="text/javascript">
	var imgBoxs = $(".img-box");
	var isReady = false;
	var step = 0;
	console.log(imgBoxs);
	function start(obj){
		//图片乱序
		outOfOrder();
		//开始键移除
		$(obj).remove();
		//isReady
		isReady = true;
	}
	function outOfOrder(){
		//将原图最下角的元素移除，换为空格
		$(".img-box[data-index='"+8+"']").parent().empty().append("<div class='null-class' data-value='-1'></div>");
		//做100次逆向移位
		initialMove(100);
	}
	function getEle(size){
		/**if(size==0)
			return "<div class='null-class' data-value='-1'></div>";**/
		var index = Math.floor(Math.random()*(size+1));
		var tem = imgBoxs.splice(index,1);
		console.log(tem);
		return tem;
	}
	function initialMove(times){
		if(times==0){
			return;
		}
		//获取当前空元素位置
		var nullEle = $(".null-class");
		var nullIndex = nullEle.parent().attr("data-index");
		//定义一个空格元素哪些位置可以移动的数组
		var indexArr = [
			{"name":"上","num":-3,"valid":true},
			{"name":"右","num":1,"valid":true},
			{"name":"下","num":3,"valid":true},
			{"name":"左","num":-1,"valid":true}
		];
		if(nullIndex%3==0){
			//左边没有元素
			indexArr[3]["valid"]=false;
		}
		if(Math.floor(nullIndex/3)==0){
			//上边没有元素
			indexArr[0]["valid"]=false;
		}
		if(nullIndex%3==2){
			//右边没有元素
			indexArr[1]["valid"]=false;
		}
		if(Math.floor(nullIndex/3)==2){
			//下边没有元素
			indexArr[2]["valid"]=false;
		}
		var moveIndex = Math.floor(Math.random()*4);
		if(indexArr[moveIndex]["valid"]){
			var targetIndex=parseInt(nullIndex)+parseInt(indexArr[moveIndex]["num"]);
			nullEle.parent().empty().append($(".basic-box[data-index='"+targetIndex+"']").children());
			$(".basic-box[data-index='"+targetIndex+"']").empty().append("<div class='null-class' data-value='-1'></div>");
			return initialMove(times-1);
		}else{
			return initialMove(times);
		}
	}
	function move(obj){
		if(!isReady){
			alert("游戏还未开始，当前不可点击！");
			return ;
		}
		//获取空格元素
		var nullEle = $(".null-class");
		//获得当前点击元素和空格元素的位置，判断是否可以移动
		var currIndex = $(obj).parent().attr("data-index");
		var nullIndex = nullEle.parent().attr("data-index");
		if(Math.floor(currIndex / 3) == Math.floor(nullIndex / 3)){
			//在同一水平线上
			for(var start = nullIndex;start != currIndex && (((start-currIndex>0)&&(nullIndex-currIndex>0))||((start-currIndex<0)&&(nullIndex-currIndex<0)));){
				$(".basic-box[data-index='"+start+"']").empty().append($(".basic-box[data-index='"+(start>currIndex?--start:++start)+"']").children());
			}
			$($(".basic-box[data-index='"+currIndex+"']")).empty().append(nullEle);
		}else if(currIndex % 3 == nullIndex % 3){
			//在同意竖直线上
			for(var start = nullIndex;start != currIndex && (((start-currIndex>0)&&(nullIndex-currIndex>0))||((start-currIndex<0)&&(nullIndex-currIndex<0)));){
				$(".basic-box[data-index='"+start+"']").empty().append($(".basic-box[data-index='"+(start=start>currIndex?start-3:3+Number(start))+"']").children());
			}
			$($(".basic-box[data-index='"+currIndex+"']")).empty().append(nullEle);
		}else{
			//alert("当前位置不可移动，请点击其它位置！");
		}
		step++;
		//判断是否成功
		if(isSuccessful()){
			alert("你花了"+step+"步完成了，真厉害！");
			location.reload();
		}
	}
	function isSuccessful(){
		var basicBoxs = $(".basic-box");
		var ok = true;
		$.each(basicBoxs,function(i,d){
			if(i==basicBoxs.length-1){
				return;
			}
			if($(d).attr("data-index")!=$(d).children().attr("data-index")){
				ok = false;
			}
		});
		return ok;
	}
</script>
</html>
